<template>
    <div>
        <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="12">
                <div id="foldLinePicture" style="height: 450px;width: 500px;display: inline-block"></div>
            </el-col>
            <el-col :span="12">
                <div id="cakePicture" style="height: 450px;width: 500px;display: inline-block"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>

    import * as echarts from 'echarts';

    export default {
        name: "Main",

        mounted() {
            this.foldLinePicture();
            this.cakePicture();
        },
        methods:{
            foldLinePicture(){
                var chartDom = document.getElementById('foldLinePicture');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                    title: {
                        text: '用户创建时间分布图',
                        subtext: '时间季度',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['第一季度', '第二季度', '第三季度', '第四季度']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [],
                            type: 'line'
                        },
                        {
                            data: [],
                            type: 'bar'
                        }
                    ]
                };
                this.request.get("eCharts/queryQuarterUsers").then(res=>{
                    if (res.code==='200'){
                        option.series[0].data=res.data;
                        option.series[1].data=res.data;
                        myChart.setOption(option);
                    }
                });
            },
            cakePicture(){
                var chartDom = document.getElementById('cakePicture');
                var myChart = echarts.init(chartDom);
                var option;

                option = {
                    title: {
                        text: '用户创建时间分布图',
                        subtext: '时间季度',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)',
                        percent: true
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [],
                            label:{
                                normal:{
                                    show: true,
                                    position: 'inside',
                                    formatter: '{d}%'
                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                this.request.get("eCharts/queryQuarterUsers").then(res=>{
                    if (res.code==='200'){
                        option.series[0].data[0]={value: res.data[0], name: '第一季度'};
                        option.series[0].data[1]={value: res.data[1], name: '第二季度'};
                        option.series[0].data[2]={value: res.data[2], name: '第三季度'};
                        option.series[0].data[3]={value: res.data[3], name: '第四季度'};
                        myChart.setOption(option);
                    }
                });

            }


        }

    }
</script>

<style scoped>

</style>